<template>
  <div class="serve-container">
    <div class="quick-add">
      <div class="quick-add-item br-5" v-for="(item, index) in quickAddListData" :key="index">
        <div class="title-wrap">
          <span class="title">{{ item.title }}</span>
          <svg-icon :icon-class="item.icon"></svg-icon>
        </div>
        <div class="content">{{ item.content }}</div>
        <el-button :style="{ background: item.bgColor }" @click.native="quickHandle(item.type)">
          <svg-icon icon-class="staff-add"></svg-icon>
          {{ item.btnText }}
        </el-button>
      </div>
    </div>
    <div class="serve-category br-20">
      <div class="category-title">
        <div class="title">服务类别列表</div>
        <div class="handle">
          <el-input placeholder="搜尋類別">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="primary" @click.native="addCategoryVisible = true">
            <svg-icon icon-class="staff-add"></svg-icon>
            新增類別
          </el-button>
        </div>
      </div>
      <el-table :data="serveCategoryListData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="類別名稱"></el-table-column>
        <el-table-column label="類別編碼"></el-table-column>
        <el-table-column label="服務數量"></el-table-column>
        <el-table-column label="狀態"></el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="editCategory">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>
    <div class="serve br-20">
      <div class="serve-title">
        <div class="title">服务列表</div>
        <div class="handle">
          <el-input placeholder="搜尋類別">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button style="background: #58bcce; color: #fff" @click.native="addServeVisible = true">
            <svg-icon icon-class="staff-add"></svg-icon>
            新增服務
          </el-button>
        </div>
      </div>
      <el-table :data="serveCategoryListData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="服務名稱"></el-table-column>
        <el-table-column label="所属類別"></el-table-column>
        <el-table-column label="價格"></el-table-column>
        <el-table-column label="銷量"></el-table-column>
        <el-table-column label="狀態"></el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="editServe">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog width="680px" class="add-category-dialog" :visible.sync="addCategoryVisible" :title="categoryTitle">
      <el-form :model="addCategoryFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="類別名稱">
              <el-input v-model="addCategoryFormData.name" autocomplete="off" placeholder="請輸入類別名稱"></el-input>
            </el-form-item>
            <el-form-item label="類別描述" style="width: 100%">
              <el-input type="textarea" v-model="addCategoryFormData.name" autocomplete="off" placeholder="請輸入類別描述"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="base-info">
          <h5>其他配置</h5>
          <div class="base">
            <el-form-item label="狀態設置">
              <el-select v-model="addCategoryFormData.name" placeholder="請選擇所屬部門">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序權重">
              <el-select v-model="addCategoryFormData.name" placeholder="請選擇所屬部門">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCategoryVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddCategory">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog width="680px" class="add-serve-dialog" :visible.sync="addServeVisible" :title="serveTitle">
      <el-form :model="addServeFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="服務名稱">
              <el-input v-model="addServeFormData.name" autocomplete="off" placeholder="請輸入服務名稱"></el-input>
            </el-form-item>
            <el-form-item label="價格">
              <el-input v-model="addServeFormData.name" autocomplete="off" placeholder="請輸入價格"></el-input>
            </el-form-item>
            <el-form-item label="銷量">
              <el-input v-model="addServeFormData.name" autocomplete="off" placeholder="請輸入銷量"></el-input>
            </el-form-item>
            <el-form-item label="類別描述" style="width: 100%">
              <el-input type="textarea" v-model="addServeFormData.name" autocomplete="off" placeholder="請輸入類別描述"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addServeVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddServe">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog width="680px" class="add-price-dialog" :visible.sync="addPriceVisible" :title="priceTitle">
      <el-form :model="addPriceFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="標準價格">
              <el-input v-model="addPriceFormData.name" autocomplete="off" placeholder="請輸入標準價格"></el-input>
            </el-form-item>
            <el-form-item label="會員價格">
              <el-input v-model="addPriceFormData.name" autocomplete="off" placeholder="請輸入會員價格"></el-input>
            </el-form-item>
            <el-form-item label="會員生效時間">
              <el-date-picker v-model="addPriceFormData.name" type="date" placeholder="年-月-日"></el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addPriceVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddServe">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'service-management',
  data() {
    return {
      quickAddListData: [
        {
          title: '類別管理',
          icon: 'serve-index-1',
          content: '創建和管理服務類別層級結構，支持多級分類',
          btnText: '創建類別',
          bgColor: '#3C58FC',
          type: 'category'
        },
        {
          title: '服務管理',
          icon: 'serve-index-2',
          content: '添加和維護具體服務項，設置價格、描述和狀態',
          btnText: '創建服務',
          bgColor: '#58BCCE',
          type: 'serve'
        },
        {
          title: '價格管理',
          icon: 'serve-index-3',
          content: '統一管理服務價格，支持批量調整和價格策略',
          btnText: '價格設定',
          bgColor: '#F9B280',
          type: 'price'
        }
      ],
      serveCategoryListData: [],
      categoryTitle: '新增類別',
      addCategoryVisible: false,
      isEditCategory: false,
      addCategoryFormData: {},
      serveTitle: '新增服務',
      addServeVisible: false,
      isEditServe: false,
      addServeFormData: {},
      priceTitle: '價格設定',
      addPriceVisible: false,
      isEditPrice: false,
      addPriceFormData: {}
    }
  },
  methods: {
    editCategory() {
      this.isEditCategory = true
      this.categoryTitle = '編輯類別'
      this.addCategoryVisible = true
    },
    editServe() {
      this.isEditServe = true
      this.serveTitle = '編輯服務'
      this.addServeVisible = true
    },
    quickHandle(type) {
      switch (type) {
        case 'category':
          this.addCategoryVisible = true
          break
        case 'serve':
          this.addServeVisible = true
          break
        default:
          this.addPriceVisible = true
      }
    },
    submitAddCategory() {},
    submitAddServe() {}
  }
}
</script>

<style scoped lang="less">
.serve-container {
  .quick-add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    &-item {
      margin-right: 15px;
      background: #fff;
      padding: 11px 21px;
      //min-width: 407px;
      flex: auto;
      .title-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        .title {
          font-size: 20px;
          line-height: 28px;
        }
        .svg-icon {
          font-size: 50px;
        }
      }
      .content {
        font-size: 20px;
        line-height: 1.2;
        margin-bottom: 13px;
      }
      .el-button {
        color: #fff;
        width: 100%;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .serve-category,
  .serve {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px 30px;
    .category-title,
    .serve-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;
      .title {
        font-size: 18px;
        line-height: 25px;
      }
      .handle {
        .el-input {
          width: 230px;
          .svg-icon {
            font-size: 18px;
          }
        }
      }
    }
    .table-foot {
      display: flex;
      justify-content: flex-end;
      margin-top: 14px;
    }
  }
}
</style>
